import AddDiffBtn from '@/components/AddDiffBtn';
import Image from '@/components/Image';
import NoImage from '@/components/NoImage';
import Rate from '@/components/Rate';
import { evaluationV1ControllerShow } from '@/services/auto/evaluation';
import { DiffOutlined, LinkOutlined } from '@ant-design/icons';
import { useModel, useParams } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Button, Skeleton, Space, Tag, Typography } from 'antd';
import DataViewer from 'common/component/DataViewer';
import { SpecificationValueType } from 'common/utils/data';
import { completeImgUrl, formatDateTime } from 'common/utils/utils';
import { Fragment } from 'react';

export default function Evaluation() {
  const { mapData: mapSpecification } = useModel('specification');

  // const { data: globalConfigData } = useModel('global-config', ({ data }) => ({
  //   data,
  // }));

  const { uuid } = useParams();

  const { data, loading, error } = useRequest(
    () => evaluationV1ControllerShow({ uuid: uuid! }),
    {
      ready: !!uuid,
    },
  );

  return (
    <div className="center-container pt-[16px]">
      {(() => {
        if (!data || loading) {
          return <Skeleton paragraph={{ rows: 10 }} />;
        }
        return (
          <Fragment>
            <div className="flex">
              <div className="flex-1 min-w-0 mr-[16px]">
                <div className="flex items-center mb-[16px]">
                  {data.brand.img && (
                    <Image
                      style={{ width: 32, height: 32 }}
                      src={completeImgUrl(
                        data.brand.img,
                        '?x-oss-process=image/resize,m_fill,w_32,h_32',
                      )}
                      className="mr-[8px]"
                    />
                  )}
                  <Typography.Title
                    className="mb-0"
                    level={2}
                    ellipsis={{ rows: 2, tooltip: true }}
                  >
                    {data.title}
                  </Typography.Title>
                </div>
                <div className="mb-[8px]">
                  <Tag color="volcano" bordered={false}>
                    {data.brand.title}
                  </Tag>
                  {data.price !== null ? (
                    <Tag
                      icon={<span>￥</span>}
                      color="var(--primary-color)"
                      bordered={false}
                    >
                      {data.price}
                    </Tag>
                  ) : (
                    <Tag color="var(--primary-color)" bordered={false}>
                      价格未公布
                    </Tag>
                  )}
                  {mapSpecification &&
                    data.specifications.map((spec) => {
                      const cur = mapSpecification[spec.specificationUuid];
                      if (cur) {
                        return (
                          <Tag className="mb-[4px]">
                            {cur?.name}：
                            {cur.valueType === SpecificationValueType.SELECT
                              ? spec.value
                                  .split(';')
                                  .filter((item) => item)
                                  .map((item) => {
                                    return cur.extra?.mapOptions?.[item];
                                  })
                                  .join('、')
                              : spec.value}
                          </Tag>
                        );
                      }
                      return <Fragment />;
                    })}
                </div>
                <Rate bizUuid={data.uuid} className='mb-[8px]'/>
                <Typography.Paragraph type="secondary" className='mb-[8px]'>
                    {formatDateTime(data.article.publishTime)}
                    <span className="ml-[4px]">
                      {data.article.keywords.map((item, index)=>{
                        return <Typography.Text key={index} keyboard>{item}</Typography.Text>;
                      })}
                    </span>
                  </Typography.Paragraph>
                {data.article.desc && (
                  <Typography.Paragraph type="secondary">
                    {data.article.desc}
                  </Typography.Paragraph>
                )}
                <Space>
                  <AddDiffBtn evaluationUuid={data.uuid}>
                    <Button
                      className="px-[2px] hover-primary"
                      size="small"
                      type="link"
                      icon={<DiffOutlined />}
                    >
                      <span>添加对比</span>
                    </Button>
                  </AddDiffBtn>
                  {data.buyUrl && (
                    <Button
                      className="hover-primary"
                      target="_blank"
                      href={data.buyUrl}
                      size="small"
                      type="text"
                      icon={<LinkOutlined />}
                    >
                      去购买
                    </Button>
                  )}
                </Space>
              </div>
              {data.article.thumbnails[0] ? (
                <Image
                  preview
                  style={{ width: 420, height: 210 }}
                  src={completeImgUrl(
                    data.article.thumbnails[0],
                    '?x-oss-process=image/resize,m_fill,w_420,h_210',
                  )}
                />
              ) : (
                <NoImage
                  style={{ width: 420, height: 210, background: '#fff' }}
                />
              )}
            </div>
            <div className="my-[16px]">
              {data.datas.map((item) => {
                return (
                  <DataViewer
                    key={item.project.uuid}
                    datas={item.children}
                    project={item.project}
                    // targets={globalConfigData.targets}
                  />
                );
              })}
            </div>
          </Fragment>
        );
      })()}
    </div>
  );
}
